<template>
  <div>
    <div>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-input v-model="code" placeholder="请输入行政区编码"  :gutter="4"></el-input>
        <el-input v-model="name" placeholder="请输入行政区名称" :gutter="4"></el-input>
        <el-button type="primary" @click.prevent="fnLoadData(1)"  :gutter="2">查询</el-button>
        <el-button type="danger"  @click.prevent="fnRestFrom" :gutter="2">
          <i class="el-icon-refresh-left" ></i>清空
        </el-button>
      </el-row>
    </div>
    <el-table
        :data="bean.list"
        border
        style="width: 100%;text-align: center">
      <el-table-column
          fixed
          prop="code"
          label="行政区编码"
          width="100%">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="level"
          label="等级"
          width="120">
      </el-table-column>
      <el-table-column
          prop="type"
          label="类别"
          width="120">
      </el-table-column>
      <el-table-column
          prop="abname"
          label="简称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pid"
          label="父编码"
          width="160">
      </el-table-column>
      <el-table-column
          prop="pname"
          label="父名称"
          :span="5">
      </el-table-column>
      <el-table-column
          fixed="note"
          label="备注"
          width="100">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="fnLoadData"
        current-page.sync="page"
        :page-size="bean.pageSize"
        :total="bean.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AdministrativeDivisionsView",
  methods: {
    fnLoadData(p=1){
      this.page = p;
      this.axios.get("http://localhost:8080/area/areaList", {params: {
        page:this.page,
        name: this.name,
          code: this.code} })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    },
    fnRestFrom(p=1){
      this.axios.get("http://localhost:8080/area/areaList", {params: { p } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    }
  },

  data() {
    return {
      bean:{
        list:[]
      },
      searchForm: {
        name: '',
        code: ''
      },
      page:1,
      code:'',
      name:'',
      userInfo:{}
    }
  },
  mounted() {
    var u = sessionStorage.getItem("userInfo");
    if (u){
      this.userInfo = JSON.parse(u);
    }
    this.fnLoadData();
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
  width:150px;
}

.el-button {
  margin-right: 10px;
}
</style>

